<template>
  <div id="PersonalManager">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>体育馆公告</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索框 -->
      <el-row :gutter="21" class="opt_div">
        <el-col :span="4">
          <el-input placeholder="公告名" v-model="noticeName"  size="mini"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="status" placeholder="请选择状态" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="已撤回" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker
              v-model="creatTime"
              style="width: 190px"
              type="date"
              value-format="yyyy-MM-dd" size="mini"
              placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="searchNotice">查询</el-button>
        </el-col>
        <!--        <el-row class="div_btn">-->
        <el-col :span="4" class="div_btn">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNotice" size="mini">新增公告</el-button>
        </el-col>
      </el-row>
      <!--内容面板-->
      <el-table :data="noticeList" style="width: 100%">
        <el-table-column prop="noticeName" label="公告名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="noticeContent" label="公告内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="creatTime" label="发布时间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="status" label="公告状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.status==2"><el-tag type="danger">已撤回</el-tag></span>
            <span v-else> <el-tag size="small">已发布</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="workName" label="发布人员" >
          <template slot-scope="scope">
            <span>{{scope.row.workName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success"  circle size="mini" @click="updateNotice(scope.row.id)">编辑</el-button>
            <el-button type="danger"  circle @click="retract(scope.row.id)" size="mini">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

    <!--添加公告-->
    <div  v-if="isReloadData">
      <el-dialog title="公告内容" :visible.sync="dialogVisibleNotice" width="40%">
        <el-card>
          <el-form :model="noticeForm" :rules="rules" class="noticeAll_from" ref="noticeForm">
            <el-form-item  label="公告名称" prop="noticeName">
              <el-input  v-model="noticeForm.noticeName"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" prop="noticeContent">
              <el-input  type="textarea"  v-model="noticeForm.noticeContent"></el-input>
            </el-form-item>
            <!--  另一种思路 也可不手动选择日期，再数据库中设置自动生成时间也可        -->
            <el-form-item label="公告日期" prop="creatTime">
              <el-date-picker
                  v-model="noticeForm.creatTime"
                  type="date"
                  size="mini"
                  placeholder="选择发布日期"
                  value-format="yyyy-MM-dd"
                  class="datePicker"></el-date-picker>
            </el-form-item>
            <el-form-item label="发布人员" prop="workId">
              <el-select v-model="noticeForm.workId" placeholder="请选择发布人员" size="mini">
                <el-option
                    v-for="(v,index) in workIdList"
                    :key="index"
                    :label="v.workName"
                    :value="v.workId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitAddForm('noticeForm')" size="mini">发布</el-button>
              <el-button @click="resetAddForm('noticeForm')" size="mini">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-dialog>
    </div>


<!--    修改-->
    <div>
      <el-dialog title="公告内容" :visible.sync="dialogUpdate" width="40%">
        <el-card>
          <el-form :model="updateForm" :rules="rules" ref="updateForm">
            <el-form-item  label="公告名称" prop="noticeName">
              <el-input  v-model="updateForm.noticeName"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" prop="noticeContent">
              <el-input  type="textarea"  v-model="updateForm.noticeContent"></el-input>
            </el-form-item>
            <!--  另一种思路 也可不手动选择日期，再数据库中设置自动生成时间也可        -->
            <el-form-item label="公告日期" prop="creatTime">
              <el-date-picker
                  v-model="updateForm.creatTime"
                  type="date"
                  size="mini"
                  placeholder="选择发布日期"
                  value-format="yyyy-MM-dd"
                  class="datePicker"></el-date-picker>
            </el-form-item>
            <el-form-item label="发布人员" prop="workId">
              <el-select v-model="updateForm.workId" placeholder="请选择发布人员" size="mini">
                <el-option
                    v-for="(v,index) in workIdList"
                    :key="index"
                    :label="v.workName"
                    :value="v.workId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateNoticeForm('updateForm')" size="mini">修改</el-button>
              <el-button @click="resetAddForm('updateForm')" size="mini">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      isReloadData:true,
      noticeList:[],
      workIdList:[],
      noticeName:"",
      creatTime:"",
      status:"",
      pageIndex:1,
      total:10,
      pageSize:3,
      dialogVisibleNotice:false,
      userName:null,
      noticeForm:{
        noticeName:"",
        creatTime:"",
        noticeContent: "",
        workId:""
      },
      rules:{
        noticeName: [
          {required: true, message: '请输入公告名', trigger: 'blur'},
        ],
        creatTime: [
          {required: true, message: '请选择公告日期', trigger: 'change'}
        ],
        noticeContent: [
          {required: true, message: '请输入公告内容', trigger: 'change'}
        ],
      },

      dialogUpdate:false,
      updateForm:{
        noticeName:"",
        creatTime:"",
        noticeContent: "",
        workId:""
      },

    }
  },

  methods: {
    //公告分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
    },

    //查询公告信息
    getNoticeListManager(noticeName,status,creatTime,pageIndex,pageSize){
      var params = new URLSearchParams();
      params.append("noticeName",noticeName)
      params.append("status",status)
      params.append("creatTime",creatTime)
      params.append("pageIndex",pageIndex)
      params.append("pageSize",pageSize)
      this.$axios.post('/notice-info/getNoticeListManager',params).then(res=>{
        console.log(res)
        this.noticeList=res.data.data.list
        this.total=res.data.data.total
      }).catch(err=>{
        console.log(err)
      })
    },

    //查询
    searchNotice(){
      this.pageIndex=1
      this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
    },
    //添加
    addNotice(){
      this.dialogVisibleNotice=true;
      // this.reloadPart()
      this.$nextTick(()=>{
        this.$refs["noticeForm"].resetFields();
      })

    },
    submitAddForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post("/notice-info/addNewNotice",this.noticeForm).then(res=>{
            console.log(res)
            if (res.data.code ==200){
              this.$message.success("添加成功")
              this.dialogVisibleNotice=false;
              this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
              console.log(res)
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err=>{
            console.log(err)
          })
        }else{
          return false;
        }
      });
    },
    //重置
    resetAddForm(formName) {
      this.$refs[formName].resetFields();
    },

    //打开修改表单
    updateNotice(id){
      this.$axios.post('/notice-info/lookNotice',"id="+id).then(res=>{
        console.log(id)
        console.log(res)
        this.updateForm=res.data.data
        this.dialogUpdate=true;
      }).catch(err=>{
        console.log(err)
      })
    },
    //修改内容
    updateNoticeForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post("/notice-info/updateNotice",this.updateForm).then(res=>{
            console.log(res)
            if (res.data.code ==200){
              this.$message.success("修改成功")
              this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
              console.log(res)
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err=>{
            console.log(err)
          })
        }else{
          return false;
        }
      });
    },

    //撤回
    retract(id){
      this.$axios.post('/notice-info/retract',"id="+id).then(res=>{
        if (res.data.code ==200){
          this.$message.success("撤回成功")
          this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
          console.log(res)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err=>{
        console.log(err)
      })
    },

    //发布人员
    getWorkId(){
      this.$axios.post("/user-info/getWorkId").then(res=>{
        console.log(res)
        this.workIdList=res.data.data
      })
    },

    //局部刷新  不好用 刷不掉表单数据
    // reloadPart() {
    //   this.isReloadData = false
    //   this.$nextTick(()=>{
    //     this.isReloadData=true
    //   })
    // },

  },
  created() {
    this.getNoticeListManager(this.noticeName,this.status,this.creatTime,this.pageIndex,this.pageSize)
    this.getWorkId()
  }
}
</script>

<style scoped>
.el-breadcrumb{
  margin-bottom: 20px;
}
.el-table{
  margin-top: 20px;
  margin-bottom: 20px;
}
.search_input{
  margin-left: 10px;
}
.opt_div{
  display: flex;
}

fieldset{
  border: 1px solid #ccc;
}
legend{
  font-size: 15px;
  font-weight: bold;
}
fieldset div{
  margin: 3px 0px;
}
.div_btn{
  margin-left: -132px;
}
</style>
